<template>
    <a-popup ref="popup" :popPlacement="props.popPlacement" :getPopModifiersFunc="methods.getPopModifiersFunc" :popShown="props.popShown" @update:popShown="$emit('update:popShown', $event)" :trigger="props.trigger">
        <slot></slot>

        <template v-slot:pop>
            <div class="pop-container">
                <div class="tooltip-container" :class="[
                    props.sharp ? '' : `c-round-${props.size}`,
                    `c-font-size-${props.size}`,
                ]" :style="[
    {
        padding: `${sizePackage.space / 2}px ${sizePackage.space
            }px`,
    },
]">
                    {{ props.tips }}
                </div>
                <div class="pop-arrow"></div>
            </div>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.pop-container {
    background-color: transparent;
}

.tooltip-container {
    background-color: #333;
    color: #fff;
    max-width: 400px;
}

.pop-arrow {
    width: 10px;
    height: 10px;
    z-index: -1;

    &::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        background-color: #333;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
}

.pop-container[data-popper-placement^="top"] {
    .pop-arrow {
        bottom: -5px;
    }
}

.pop-container[data-popper-placement^="bottom"] {
    .pop-arrow {
        top: -5px;
    }
}

.pop-container[data-popper-placement^="left"] {
    .pop-arrow {
        right: -5px;
    }
}

.pop-container[data-popper-placement^="right"] {
    .pop-arrow {
        left: -5px;
    }
}
</style>

<script setup lang="ts">
import { PopPlacementType, PopupExposed, SizeType, TriggerType } from '@/types'
import APopup from './APopup.vue'
import utils from "@/common/utils"
import { computed, ref } from 'vue'

interface PropsType {
    popShown?: boolean
    popPlacement?: PopPlacementType
    size?: SizeType
    sharp?: boolean
    tips?: string
    trigger?: TriggerType
}
const props = withDefaults(defineProps<PropsType>(), {
    popShown: undefined,
    popPlacement: 'top',
    size: 'm',
    sharp: false,
    tips: '',
    trigger: 'hover',
})

const sizePackage = computed(() => {
    return utils.getSizePackageByName(props.size)
})

const popup = ref<PopupExposed>()
const methods = {
    getTargetEl() {
        return popup.value?.getTargetEl()
    },
    getPopEl() {
        return popup.value?.getPopEl()
    },
    getPopModifiersFunc() {
        return [
            {
                name: 'offset',
                options: {
                    offset: [0, sizePackage.value.space / 2],
                }
            },
            {
                name: 'arrow',
                options: {
                    element: methods.getPopEl()!.getElementsByClassName('pop-arrow')[0],
                },
            },
        ]
    },
}
</script>